<template>
  <el-table
    ref="tableData"
    :data="tableData"
    :border="border"
    style="width: 100%"
    :v-loading="loading"
    :width="width"
    :height="height"
    @selection-change="selectChange"
    :header-cell-style="{ background: '#F4F4F5', color: '#606266' }"
  >
    <el-table-column
      v-if="number"
      label="序号"
      type="index"
      align="center"
      width="60"
    >
    </el-table-column>
    <el-table-column
      fixed="left"
      v-if="selected"
      align="center"
      type="selection"
    >
    </el-table-column>
    <el-table-column
      v-for="(item, index) in tableOptions"
      :key="index"
      :fixed="item.fixed"
      :width="item.width"
      :prop="item.prop"
      :align="item.align || 'center'"
      :label="item.label"
    >
      <template slot-scope="scope">
        <div v-if="item.type == 'switch'">
          <el-switch
            v-model="scope.row[item.prop]"
            class="switch"
            :active-color="item.activeColor || '#13ce66'"
            :inactive-color="item.inactiveColor || '#ff4949'"
            :active-text="item.activeText"
            :inactive-text="item.inactiveText"
            @change="item.handle($event, scope.row[item.key] || scope.row)"
          >
          </el-switch>
        </div>
        <div v-else-if="item.type == 'tag'">
          <el-button
            v-if="item.format"
            plain
            :type="item.plan || 'primary'"
            :size="item.size || 'mini'"
            @click="item.handle(scope.row)"
          >
            {{ item.format(scope.row[item.prop]) }}</el-button
          >
          <el-button
            v-else
            plain
            :type="item.plan || 'primary'"
            :size="item.size || 'mini'"
            @click="item.handle(scope.row)"
          >
            {{ scope.row[item.prop] || item.empty || "无" }}</el-button
          >
        </div>
        <div v-else-if="item.type == 'operation'">
          <el-button
            v-for="(item1, index) in item.options"
            :key="index"
            @click="item1.handle(scope.row)"
            :size="item1.size || 'mini'"
            :type="item1.type"
            >{{ item1.name }}</el-button
          >
        </div>
        <div v-else-if="item.type == 'date'">
          <span :style="item.style">
            <i class="el-icon-time" v-if="scope.row[item.prop]"></i>
            {{
              scope.row[item.prop]
                | formatDateStr(item.format || "yyyy-MM-dd hh:mm:ss") ||
              item.empty
            }}</span
          >
        </div>
        <div v-else-if="item.type == 'image'">
          <el-popover
            v-if="scope.row[item.prop]"
            :placement="item.position || 'right'"
            :trigger="item.trigger || 'click'"
          >
            <img :src="scope.row[item.prop]" :style="item.options.big" />
            <img
              slot="reference"
              :src="scope.row[item.prop]"
              :style="item.options.small"
            />
          </el-popover>
          <span v-else>{{ item.empty }}</span>
        </div>
        <div v-else-if="item.type == 'slot'">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </div>
        <div v-else>
          <span v-if="item.format" :style="item.style">{{
            item.format(scope.row[item.prop]) || item.empty || "无"
          }}</span>
          <span v-else :style="item.style">{{
            scope.row[item.prop] || item.empty || "无"
          }}</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    // 表格数据
    tableData: {
      type: Array,
      require: true,
    },
    // 表格配置项
    tableOptions: {
      type: Array,
      require: true,
    },
    // 是否开启loading
    loading: {
      type: Boolean,
      default: true,
    },
    // 自定义高
    height: {
      type: String,
    },
    // 自定义宽
    width: {
      type: String,
      default: "100%",
    },
    // 是否需要边框
    border: {
      type: Boolean,
      default: false,
    },
    // 添加序号列
    number: {
      type: Boolean,
      default: false,
    },
    // 添加多选列,需监听多选事件 @selectionChange
    selected: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    selectChange(val) {
      this.$emit("selectionChange", val);
    },
    switchChange(e, name) {
      console.log(e);
      console.log(name);
    },
  },
};
</script>

<style scoped lang='scss'>
</style>
